<script setup lang="ts">
import F_title from "@/components/common/f_title.vue";
import {
  type userAccountBindType,
  userInfoApi,
  type userUpdateInfoRequest,
  type userUpdatePwdType
} from "@/api/user_api";
import {computed, reactive, ref, watch} from "vue";
import type {userInfoType} from "@/api/user_api";
import {Message} from "@arco-design/web-vue";
import {dateFormat} from "@/utils/date";
import {userUpdateInfoApi} from "@/api/user_api";
import F_img_cutter from "@/components/common/f_img_cutter.vue";
import F_bind_account_modal from "@/components/admin/f_bind_account_modal.vue";
import F_pwd_modal from "@/components/admin/f_pwd_modal.vue";
import {userStorei} from "@/stores/user_store";
import router from "@/router";
const store = userStorei()
const data = reactive<userInfoType>({
  "userID": 10,
  "nickname": "lennon",
  "role": 1,
  "createdAt": "",
  "avatar": "",
  "tel": "",
  "email": "",
  "scope": 74,
  "registerSource": 4,
  isPwdBind: false
})

async function getData() {
  const res = await userInfoApi()
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Object.assign(data, res.data)
}

const formRef = ref()

async function userInfoUpdate(key: keyof userUpdateInfoRequest) {
  const obj: userUpdateInfoRequest = {}
  if (key === "nickname") {
    const val = await formRef.value.validate()
    if (val) {
      return
    }
  }
  obj[key] = data[key]
  const res = await userUpdateInfoApi(obj)
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
  store.saveUserInfo(store.userInfo.token)


}

const visible = ref(false)


const bindTypeRef = ref<userAccountBindType>(1)

function showBindAccount(bindType: userAccountBindType) {
  bindTypeRef.value = bindType
  visible.value = true
}

getData()


const pwdTypeRef = ref<1 | 2>(1) // 1 绑定密码  2 修改密码

const pwdVisible = ref()

function showPwdModal(pwdType: 1 | 2) {
  pwdTypeRef.value = pwdType
  pwdVisible.value = true
}

function logout() {
  store.userLogout()
  router.push({name: ""})
}

function success() {
  getData()
}


</script>

<template>
  <div class="user_center_view">
    <f_title title="用户信息"></f_title>
    <f_bind_account_modal v-model:visible="visible" :bind-type="bindTypeRef" @success="success()"></f_bind_account_modal>
    <f_pwd_modal v-model:visible="pwdVisible" @ok="getData" :pwd-type="pwdTypeRef"></f_pwd_modal>
    <div class="body user_info_body">
      <a-form ref="formRef" :model="data">
        <a-form-item label="头像">
          <f_img_cutter v-model="data.avatar" @change="userInfoUpdate('avatar')"></f_img_cutter>
        </a-form-item>
        <a-form-item label="昵称" field="nickname" validate-trigger="blur" :rules="[{required: true}]">
          <a-input placeholder="昵称" @change="userInfoUpdate('nickname')" v-model="data.nickname"></a-input>
        </a-form-item>
        <a-form-item label="积分">
          <span>{{ data.scope }}</span>
          <router-link class="form_item_a" :to="{name: 'scopeRecharge'}">充值</router-link>
        </a-form-item>
        <!--        <a-form-item label="手机号">-->
        <!--          <template v-if="data.tel">-->
        <!--            <span>{{ data.tel }}</span>-->
        <!--            <a href="javascript:void(0)" @click="showBindAccount(2)" class="form_item_a">更换</a>-->
        <!--          </template>-->
        <!--          <a href="javascript:void(0)" @click="showBindAccount(2)" v-else>绑定手机号</a>-->
        <!--        </a-form-item>-->
        <a-form-item label="邮箱">
          <template v-if="data.email">
            <span>{{ data.email }}</span>
            <a href="javascript:void(0)" @click="showBindAccount(1)" class="form_item_a">更换</a>
          </template>
          <a href="javascript:void(0)" @click="showBindAccount(1)" v-else>绑定邮箱</a>
        </a-form-item>
        <a-form-item label="注册时间">{{ dateFormat(data.createdAt) }}</a-form-item>
      </a-form>
    </div>
    <f_title title="操作"></f_title>
    <div class="body">
      <a-button type="primary" @click="showPwdModal(2)" v-if="data.isPwdBind">修改密码</a-button>
      <a-button type="primary" @click="showPwdModal(1)" v-else>绑定密码</a-button>
      <a-button type="primary" @click="logout()" style="margin-left: 10px;" status="danger">注销退出</a-button>
    </div>
  </div>
</template>

<style lang="less">
.user_center_view {
  padding: 20px;

  .body {
    width: 350px;
  }

  .user_info_body {
    margin-top: 20px;

    .form_item_a {
      margin-left: 10px;
    }
  }
}


</style>